<template>
  <div class="body">
    <p style="display:flex;justify-content:space-between" v-if="!Archive">
      文件：
      <a-upload :showUploadList="false" :customRequest="upload" accept=".doc,.docx,.pdf,.xlsx,.xls,image/*">
        <a-button :loading="uploading" type="primary">上传文件</a-button>
      </a-upload>
    </p>

    <span v-if="!Archive" class="flex justify-end"> 支持扩展名：.doc、.docx、.pdf、.xlsx、.xls 、image/*</span><br />
    <a-table rowKey="id" :columns="columns" :data-source="data">
      <span slot="updateTime" slot-scope="updateTime"> {{ humanizeDate(updateTime) }}</span>
      <template slot="opt" slot-scope="text, record">
        <a @click="download(record)" v-action:get class="mr-2">查看</a>
        <a-popconfirm title="确认删除吗?" @confirm="() => onDelete(record)">
          <a href="javascript:;" v-action:delete>删除</a>
        </a-popconfirm>
      </template>
    </a-table>
    <a-button class="next" @click="onSubmit" type="primary">完成</a-button>
  </div>
</template>

<script>
import { creatFile, getFile, deleteFile } from '@/api/common'
import moment from 'moment'
import OSSClient from '@/utils/oss'
const client = new OSSClient()

const columns = [
  { dataIndex: 'ids', key: 'ids', title: '编号' },
  { dataIndex: 'fileName', key: 'fileName', title: '文件名称' },
  { dataIndex: 'updateTime', key: 'updateTime', title: '上传日期', scopedSlots: { customRender: 'updateTime' } },
  { dataIndex: 'fileFormat', key: 'fileFormat', title: '文件格式' },
  { dataIndex: 'opt', key: 'opt', title: '操作', scopedSlots: { customRender: 'opt' } }
]
export default {
  name: 'UploadFile',
  data() {
    return {
      data: [],
      columns,
      uploading: false
    }
  },
  computed: {
    Archive() {
      return Number(this.$route.query.Archive)
    },
    id() {
      return this.$route.query.id
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    onSubmit() {
      this.$emit('submit')
      this.$router.push({ name: 'evaluation/project' })
    },
    download(record) {
      let suffix = record.fileUrl.split('.').pop()
      if (['doc', 'docx', 'xls', 'xlsx'].includes(suffix)) {
        window.open(`https://view.officeapps.live.com/op/view.aspx?src=${window.encodeURIComponent(record.fileUrl)}`)
      } else {
        window.open(record.fileUrl)
      }
    },
    humanizeDate(v) {
      if (v) {
        return moment(v * 1000).format('YYYY-MM-DD') || '--'
      } else {
        return '-'
      }
    },
    async onDelete(record) {
      await deleteFile(record.id)
      this.getData()
    },
    async getData() {
      let count = 0
      const res = await getFile({
        projectId: this.id,
        relationType: 1
      })
      this.data = res?.result?.data || []
      this.data.forEach(el => {
        el.ids = ++count
      })
    },
    async upload(obj) {
      try {
        this.uploading = true
        let url = await client.upload(obj.file, this.id, 1)
        await this.createFile(obj.file.name, url)

        this.uploading = false
        this.getData()
        this.$message.success('上传成功')
      } catch (err) {
        console.error(err)
        this.$message.error('上传失败')
      }
    },
    async createFile(filename, url) {
      let [name, suffix] = filename.split('.')
      const data = {
        fileName: name,
        fileFormat: suffix,
        projectId: this.id,
        relationType: 1,
        fileUrl: url
      }
      return await creatFile(data)
    }
  }
}
</script>

<style>
.next {
  margin-left: 500px;
  margin-top: 100px;
}
.body {
  width: 100%;
  height: 100vh;
  margin: 10px;
  padding: 15px;
  background: #ffffff;
}
</style>
